// MainApp.tsx
import React, { useState } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import App1 from './App';
import App2 from './App2';
import App3 from './App3';
import App4 from './App4';
import App5 from './App5';
import App6 from './App6';
type ScreenType = 'main' | 'app1' | 'app2' | 'app3' | 'app4' | 'app5'| 'app6';

function MainApp() {
  const [currentScreen, setCurrentScreen] = useState<ScreenType>('main');

  const renderScreen = () => {
    switch (currentScreen) {
      case 'app1':
        return <App1 />;
      case 'app2':
        return <App2 />;
      case 'app3':
        return <App3 />;
      case 'app4':
        return <App4 />;
      case 'app5':
        return <App5 />;
      case 'app6':
        return <App6 />;
      default:
        return (
          <View style={styles.menuContainer}>
            <Text style={styles.title}>Swiper FlatList 示例</Text>
            <Text style={styles.description}>
              选择以下示例查看不同的 Swiper FlatList 功能
            </Text>

            <TouchableOpacity
              style={styles.button}
              onPress={() => setCurrentScreen('app1')}
            >
              <Text style={styles.buttonText}>SwiperFlatlist</Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={styles.button}
              onPress={() => setCurrentScreen('app2')}
            >
              <Text style={styles.buttonText}>SwiperFlatlistWithHandler</Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={styles.button}
              onPress={() => setCurrentScreen('app3')}
            >
              <Text style={styles.buttonText}>SwiperFlatlist垂直方向属性</Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={styles.button}
              onPress={() => setCurrentScreen('app4')}
            >
              <Text style={styles.buttonText}>SwiperFlatlistWithHandler垂直方向属性</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.button}
              onPress={() => setCurrentScreen('app5')}
            >
              <Text style={styles.buttonText}>RN 可见性配置</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.button}
              onPress={() => setCurrentScreen('app6')}
            >
              <Text style={styles.buttonText}>手势库支持</Text>
            </TouchableOpacity>
          </View>
        );
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      {currentScreen !== 'main' && (
        <TouchableOpacity
          style={styles.backButton}
          onPress={() => setCurrentScreen('main')}
        >
          <Text style={styles.backButtonText}>← 返回</Text>
        </TouchableOpacity>
      )}
      <View style={styles.content}>
        {renderScreen()}
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  content: {
    flex: 1,
  },
  menuContainer: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 10,
    color: '#333',
  },
  description: {
    fontSize: 16,
    textAlign: 'center',
    marginBottom: 40,
    color: '#666',
  },
  button: {
    backgroundColor: '#007AFF',
    padding: 15,
    borderRadius: 8,
    marginBottom: 15,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
  },
  backButton: {
    padding: 10,
    paddingHorizontal: 15,
    backgroundColor: '#f0f0f0',
  },
  backButtonText: {
    fontSize: 16,
    color: '#007AFF',
    fontWeight: '500',
  },
});

export default {
  displayName: "react-native-swiper-flatlist",
  framework: "React",
  category: "UI",
  title: "react-native-swiper-flatlist",
  documentationURL: "https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-swiper-flatlist.md",
  description: "react-native-swiper-flatlist",
  examples: [
    {
      title: "react-native-swiper-flatlist",
      render: function (): any {
        return <MainApp />;
      },
    },
  ],
};
